<template>
	<view class="tborder">
		<view class="tabs" :class="$isPC ? 'IsPC':''">
			<view class="tab" :class="active===item.id ? 'active' :''" v-for="(item,index) of tabs" :key="index"
				@click="handleTab(item.id)">
				{{item.title}}
			</view>
		</view>
		<view class="lists">
			<view class="order-lists">
				<view class="order-list" v-for="(item,index) of lists" :key="index" 
				@click="goPage('/pages/users/tborder/detail/detail?id='+item.id)">
					<view class="order-list-left">
						<image :src="item.detail.goods_img" mode="widthFix"></image>
						<text>返{{commissionAmount(item.siter_commission) || '0'}}sg</text>
					</view>
					<view class="order-list-right">
						<text class="title fex2">{{item.detail.goods_name || item.detail.shop_title}}</text>
						<view class="order-ta">
							<text>{{item.detail.goods_cate_name}}</text>
							<text>x {{item.detail.goods_ta}}</text>
						</view>
						<!-- -1未知,1待付款,2已付款,21处理中,3已发货,31配送中,32已拒签,4已收货,
						41结算中,5已结算,6失效,7已完成,8维权中,81维权成功,82维权失败,9退款,10退货,11系统锁定-->
						<view class="order-status">
							<view class="payment">
								<text>实付款:</text>
								<text>{{item.orders_price}}</text>
							</view>
							<text class="status" v-if="item.detail.dm_order_status == '-1'">未知</text>
							<text class="status" v-if="item.detail.dm_order_status == 1">待付款</text>
							<text class="status" v-if="item.detail.dm_order_status == 2">已付款</text>
							<text class="status" v-if="item.detail.dm_order_status == 21">处理中</text>
							<text class="status" v-if="item.detail.dm_order_status == 3">已发货</text>
							<text class="status" v-if="item.detail.dm_order_status == 31">配送中</text>
							<text class="status" v-if="item.detail.dm_order_status == 32">已拒签</text>
							<text class="status" v-if="item.detail.dm_order_status == 4">已收货</text>
							<text class="status" v-if="item.detail.dm_order_status == 41">结算中</text>
							<text class="status" v-if="item.detail.dm_order_status == 5">已结算</text>
							<text class="status" v-if="item.detail.dm_order_status == 6">失效</text>
							<text class="status" v-if="item.detail.dm_order_status == 7">已完成</text>
							<text class="status" v-if="item.detail.dm_order_status == 8">维权中</text>
							<text class="status" v-if="item.detail.dm_order_status == 81">维权成功</text>
							<text class="status" v-if="item.detail.dm_order_status == 82">维权失败</text>
							<text class="status" v-if="item.detail.dm_order_status == 9">退款,</text>
							<text class="status" v-if="item.detail.dm_order_status == 10">退货</text>
							<text class="status" v-if="item.detail.dm_order_status == 11">系统锁定</text>
						</view>
					</view>
				</view>
			</view>
			<block-loading :status="status" :len="lists.length"></block-loading>
		</view>
		<!-- #ifdef APP-PLUS -->
		<news-flow :type="1"></news-flow>
		<!-- #endif -->
		<view class="bottom" :class="$isPC ? 'IsPC':''">
			<text>淘系产品请手动同步订单</text>
			<text @click="goPage('/pages/users/tborder/retrieve/retrieve')">去同步>></text>
		</view>
	</view>
</template>

<script>
	import {getOrders} from "@/api/duomai.js"
	export default{
		name:"tborder",
		data(){
			return{
				active: 9,
				tabs: [
					{
						id: 9,
						title: "全部"
					},
					{
						id: 0,
						title: "待确认"
					},{
						id: 1,
						title: "有效"
					},
					// {
					// 	id: 2,
					// 	title: "已结算"
					// },
					{
						id: -1,
						title: "无效"
					}
				],
				page:1,
				lists:[],
				status: "loading",
			}
		},
		onShow() {
			this.getLists();	
		},
		//上拉加载
		onReachBottom(){
			this.getLists();
		},
		onNavigationBarButtonTap(e) {
			this.goPage('/pages/users/tborder/retrieve/retrieve')
		},
		//下拉刷新
		onPullDownRefresh() {
			this.lists = [];
			this.page = 1;
			this.getLists();
		},
		methods:{
			goPage(url){
				uni.navigateTo({
					url:url
				})
			},
			commissionAmount(val) {
				val = Math.ceil(Number(val.replace(/,/g, ''))*20);
				return val;
			},
			handleTab(id) {
				this.active = id
				this.lists = []
				this.page = 1;
				this.getLists();
			},
			async getLists(){
				let res = await getOrders({status:this.active,page:this.page,size:20});
				if(res.code === 1){
					uni.stopPullDownRefresh();
					if(this.page===1&&res.data.length === 0){
						this.status = "nodata"
						return
					}
					if(this.page===1&&res.data.length > 0 && res.data.length < 20){
						this.status = "nomore"
					}
					if(res.data.length === 0){
						this.status = "nomore"
						return;
					}
					this.page++;
					for(let item of res.data){
						if(item.detail){
							let detail = JSON.parse(item.detail);
							if(detail.data&&detail.data.details.length){
								item.detail = detail.data.details[0]
								let img = item.detail.goods_img;
								if(img.indexOf("http") == -1 && 
								img.indexOf("https")){
									item.detail.goods_img = "http:"+item.detail.goods_img;
								}
							}
						}
					}
					this.lists = this.lists.concat(res.data);
				}
			}
		}
	}
</script>

<style lang="less" scoped src="./index.less">
</style>
